<template>
<div class="uploadQueBank">
    <div class="logo">
        <img  height="64" width="344" :src="logoImgUrl" alt="logo">
    </div>
    <div class="wrapper">
        <div class="container"> 
            <h1>上传题库</h1>
            <div id="bulkEnrollment">
              <el-upload class='image-uploader' :auto-upload='true' list-type='.xlsx' :show-file-list='true'
              :before-upload="beforeUpload" :drag='true' action='' :limit="1" :on-exceed="handleExceed"
              :http-request="uploadFile">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip">一次只能上传一个文件，仅限xslx或xsl格式，单文件不超过1MB</div>
              </el-upload>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import { uploadQueBank } from "../../api/user";
import { Toast } from "vant";
import XLSX from "xlsx";
export default {
  data() {
    return {
      logoImgUrl:require('../../assets/logo.png'),
      isBulkEnrollment: false,
      listTable: [],

      message1:"",
      IDNumReg:/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
      
    };
  },
  components:{
    
  },
  methods: {
    async uploadQueBank() {
      await uploadQueBank(this.listTable)
        .then((res) => {
          Toast(res.msg);
          console.log(res.msg);
        })
        .catch((err) => console.log(err));
      this.listTable = []
    },

    // 上传文件之前的钩子
    beforeUpload(file) {
      // 判断文件格式
      let hz = file.name.split(".")[1]
      if (hz != 'xlsx' && hz != 'xls') {
        return false;
      }
    },
    // 上传文件个数超过定义的数量
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，请删除后继续上传`)
    },
    // 上传文件
    uploadFile(item) {
      // console.log(item.file);
      var reader = new FileReader()// FormData 对象
      let arr = [];
      reader.readAsBinaryString(item.file)
      reader.onload = (e) => {
        const data = e.target.result
        const wb = XLSX.read(data, { type: "binary"});
        const wsname = wb.SheetNames[0]
        const ws = wb.Sheets[wsname]
        var result = XLSX.utils.sheet_to_json(ws, { header: 1 })
        result.forEach((item, index) => {
          if(index > 0) {
            let obj = {
              topicNum: '',
              subject: item[0],
              topicType: item[1],
              stem: item[2],
              answer: item[3],
              analysis: item[4],
              A:item[5],
              B:item[6],
              C:item[7],
              D:item[8],
              knowledgePoints: item[9],
            }
            this.listTable.push(obj)
          }
        });
        console.log(this.listTable);
        this.uploadQueBank()
      }

      
     
    }
  },
}
</script>

<style lang="stylus">
.uploadQueBank
  box-sizing border-box
  color white
  font-weight 300
  font-family 'Source Sans Pro', sans-serif
  flex 1 1 100%
  .logo
    margin-top 20px
    margin-left 10px
  .wrapper
    border 1px solid #CCCCCC
    background #50a3a2cc
    height 400px
    margin 50px 10px 0 10px
    .container
        margin 0 auto
        text-align center
        display block
        color white
        h1
          margin-top 10px
        #bulkEnrollment
          margin auto
          .el-upload-dragger
            width 660px
            height 220px

</style>